import React, { useState } from 'react';
import { Layout, Menu, Avatar } from 'antd';
import { useHistory } from 'react-router-dom'
import {
  MenuUnfoldOutlined,

  AntDesignOutlined,
  MailOutlined,
  AppstoreOutlined,

} from '@ant-design/icons';

const { Header, Sider, Content } = Layout
const { SubMenu } = Menu;

export default function Main({ children }) {
  const [collapsed, setCollapsed] = useState(false)

  const { push } = useHistory()
  const toggle = () => {
    setCollapsed(!collapsed)
  }

  return (
    <Layout>

      <Sider>
        <Avatar
          size={{
            xs: 24,
            sm: 32,
            md: 40,
            lg: 64,
            xl: 80,
            xxl: 100,
          }}
          icon={<AntDesignOutlined />}
        />
        <Menu
          theme='dark'
          mode="inline" defaultSelectedKeys={['/admin/home']} onClick={({ key }) => {
            push(key)
          }}
          defaultOpenKeys={['/admin/home']}
        >
          <Menu.Item key="/admin/home" icon={<MenuUnfoldOutlined />}>首页</Menu.Item>
          <SubMenu key="/admin/list" icon={<MailOutlined />} title="客户管理">
            <Menu.Item key="/admin/list" title='客户'>客户信息</Menu.Item>
            <Menu.Item key="/admin/join">添加客户</Menu.Item>
            <Menu.Item key="3">Option 3</Menu.Item>
            <Menu.Item key="4">Option 4</Menu.Item>
          </SubMenu>
          <SubMenu key="sub3" icon={<AppstoreOutlined />} title="权限管理">
            <Menu.Item key="5">Option 5</Menu.Item>
            <Menu.Item key="6">Option 6</Menu.Item>
            <SubMenu key="sub4" title="Submenu">
              <Menu.Item key="7">Option 7</Menu.Item>
              <Menu.Item key="8">Option 8</Menu.Item>
            </SubMenu>
          </SubMenu>
        </Menu>
      </Sider>
      <Layout className="site-layout">
        {<Header className="site-layout-background" style={{ padding: 0 }}>
          {/* {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: toggle,
          })} */}
          <span style={{ color: "#ffffff" }}>{ }</span>
        </Header>}
        <Content
          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
          }}
        >
          {children}
        </Content>
      </Layout>
    </Layout>
  )
}
